<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情页</title>
    <link rel="stylesheet" href="./lib/fa/css/font-awesome.css">
    <link rel="stylesheet" href="./lib/mui/css/mui.css">
    <link rel="stylesheet" href="./css/forPublic.css">
    <link rel="stylesheet" href="./css/conmon.css">
    <link rel="stylesheet" href="./css/produc.css">
</head>

<body>
    <div class="le-tao">
        <!-- 头部 -->
        <div class="letao-top">
            <a href="#"><i class="mui-icon mui-icon-back"></i></a>
            <p>商品详情</p>
            <a href="#" style="background:none"><i class="mui-icon mui-icon-spinner mui-spin " ></i></a>
        </div>
        <!-- 主要内容区 -->
        <div class="letao-main">
            <!-- 区域滚动 -->
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!-- 图片轮播区 -->
                    <div class="mui-slider">
                        <div class="mui-slider-group mui-slider-loop">
                            <div class="mui-slider-item">
                                <a href="#"><img src="./images/banner4.png" /></a>
                            </div>
                            <div class="mui-slider-item">
                                <a href="#"><img src="./images/banner4.png" /></a>
                            </div>
                        </div>
                    </div>
                    <!-- 详情描述 -->
                    <div class="prodec">
                        <p>hhfsyfbsuifys9ygbfusyugqerwt</p>
                        <p class="pro-price">
                            <span>价格:</span>
                            <span class="newPrice">￥488</span>
                            <span class="oldPrice">$666</span>
                        </p>
                        <div class="size">
                            <span class="big-size">尺码:</span>
                            <span class="size-text">1</span>
                            <span class="size-text">1</span>
                            <span class="size-text">1</span>
                            <span class="size-text">1</span>
                            <span class="size-text">1</span>
                            <span class="size-text">1</span>
                            <span class="size-text">1</span>
                        </div>
                        <div class="chance-shpping">
                            <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='100'>
                                <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                                <label> 数量：
                                  <input class="mui-numbox-input" type="number" value="1" />
                                </label>
                                <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部区域 -->
        <div class="letao-footer">
            <a href="#" class="mui-btn mui-btn-primary">
                <p>前往购物车</p>
            </a>
            <a href="#" class="mui-btn mui-btn-danger" id="add-car">
                <p>加入购物车</p>
            </a>
            <a href="#" class="mui-btn mui-btn-success">
                <p>立即购买</p>
            </a>
        </div>
    </div>
    <!-- 模板区域 -->
    <script type="text/html" id="temp">
        <!-- <div class="mui-scroll-wrapper"> -->
        <!-- <div class="mui-scroll"> -->
        <!-- 图片轮播区 -->
        <div class="mui-slider">
            <div class="mui-slider-group mui-slider-loop">
                <div class="mui-slider-item">
                    <a href="#"><img src="{{pic[pic.length-1].picAddr}}" /></a>
                </div>
                {{each pic v i}}
                <div class="mui-slider-item">
                    <a href="#"><img src="{{v.picAddr}}" /></a>
                </div>
                {{/each}}
                <div class="mui-slider-item">
                    <a href="#"><img src="{{pic[0].picAddr}}" /></a>
                </div>
            </div>
        </div>
        <!-- 详情描述 -->
        <div class="prodec">
            <p>{{proName}}</p>
            <p class="pro-price">
                <span>价格:</span>
                <span class="newPrice">￥{{price}}</span>
                <span class="oldPrice">${{oldPrice}}</span>
            </p>
            <div class="size">
                <span class="big-size">尺码:</span>
                <%
                        var start=size.split("-")[0];
                        var end=size.split("-")[1];
                        %>
                    <%
                        for(var i=start;i<=end;i++){%>
                        <span class="size-text">{{i}}</span>
                        <% }%>
            </div>
            <!-- 购买商品数量 -->
            <div class="chance-shpping">
                <span style="color:red;font-size:20px;">数量：</span>
                <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1' data-numbox-max='{{num}}'>
                    <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                    <input class="mui-numbox-input" type="number" />
                    <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                </div>
            </div>
        </div>
        <!-- </div> -->
        <!-- </div> -->

    </script>
    <script src="./lib/zepto/zepto.min.js"></script>
    <script src="./lib/artTemplate/template-web.js"></script>
    <script src="./lib/mui/js/mui.js"></script>
    <script src="./js/product.js"></script>
</body>

</html>